<template>
  <div class="user-center-container">
    <!-- 用户信息卡片 -->
    <div class="user-info-card">
      <div class="user-avatar">
        <img
          :src="userStore.userInfo.avatar"
          alt="用户头像"
          @click="previewAvatar"
        />
        <div class="avatar-upload-btn" @click="goToAvatarEdit">
          <img
            src="../assets/icons/change.svg"
            alt=""
            style="width: 30px; height: 30px"
          />
        </div>
      </div>

      <div class="user-details">
        <div class="user-name">
          {{ userStore.userInfo.name || "未设置" }}
        </div>
        <div class="user-stats">
          <div class="stat-item">
            <div>
              <span class="stat-value">{{ clothesCount }}</span>
              <span class="stat-label">衣物</span>
            </div>
          </div>
          <div class="stat-item">
            <div>
              <span class="stat-value">{{ outfitCount }}</span>
              <span class="stat-label">搭配</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <van-cell-group inset>
        <van-cell
          title="关于我们"
          size="large"
          icon="info-o"
          is-link
          :clickable="false"
          @click="showAboutPopup = true"
        />
        <van-cell
          title="隐私政策"
          size="large"
          icon="shield-o"
          is-link
          :clickable="false"
          @click="showPrivacyPopup = true"
        />
        <van-cell
          title="帮助中心"
          size="large"
          icon="question-o"
          is-link
          :clickable="false"
          @click="showHelpPopup = true"
        />
        <van-cell
          title="系统设置"
          size="large"
          icon="setting-o"
          is-link
          :clickable="false"
        />
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <van-button
        type="default"
        size="large"
        @click="showLogoutPopup = true"
        class="logout-button"
      >
        退出登录
      </van-button>
    </div>

    <!-- 版本信息 -->
    <div class="version-info">我的衣橱 v1.0.0</div>

    <!-- 弹窗 -->
    <van-popup v-model:show="showAboutPopup" round :style="{ width: '80%' }">
      <div class="popup-content">
        <h3>关于我们</h3>
        <div class="about-content">
          <p>
            我的衣橱是一款衣物管理应用，帮助您更好地管理个人衣物和衣橱统计分析。
          </p>
          <p>
            我们致力于让您的衣橱更加智能、高效，让每一件衣物都能发挥最大价值。
          </p>
        </div>
        <div class="popup-confirm-btn" @click="showAboutPopup = false">
          确定
        </div>
      </div>
    </van-popup>

    <van-popup
      v-model:show="showPrivacyPopup"
      position="center"
      round
      :style="{ width: '80%' }"
    >
      <div class="popup-content">
        <h3>隐私政策</h3>
        <div class="privacy-content">
          <p>
            我们非常重视您的隐私保护。本应用不会收集您的个人信息，所有数据均存储在您的设备本地。
          </p>
          <p>
            您可以随时删除应用数据，我们不会在未经您允许的情况下共享您的任何信息。
          </p>
        </div>
        <div class="popup-confirm-btn" @click="showPrivacyPopup = false">
          确定
        </div>
      </div>
    </van-popup>

    <van-popup
      v-model:show="showHelpPopup"
      position="center"
      round
      :style="{ width: '80%' }"
    >
      <div class="popup-content">
        <h3>帮助中心</h3>
        <div class="help-content">
          <p>有任何问题或建议，请通过邮箱联系我们：</p>
          <p>邮箱：1905714227@qq.com</p>
        </div>
        <div class="popup-confirm-btn" @click="showHelpPopup = false">确定</div>
      </div>
    </van-popup>

    <van-popup v-model:show="showLogoutPopup" round :style="{ width: '80%' }">
      <div class="popup-content-container">
        <h3>温馨提示</h3>
        <div class="about-content about-content-text">确定退出登录吗？</div>
        <div class="popup-buttons">
          <div class="cancel-btn" @click="showLogoutPopup = false">取消</div>
          <div class="confirm-btn" @click="handleLogout">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "../store/user";
import { useClothesStore } from "../store/clothes";
import { useOutfitStore } from "../store/outfit";
import { showImagePreview } from "vant";

const router = useRouter();
const userStore = useUserStore();
const clothesStore = useClothesStore();
const outfitStore = useOutfitStore();

const outfitCount = ref(0);
const clothesCount = ref(0);

// 弹窗状态
const showAboutPopup = ref(false);
const showPrivacyPopup = ref(false);
const showHelpPopup = ref(false);
const showLogoutPopup = ref(false);

// 跳转到头像编辑页面
const goToAvatarEdit = () => {
  router.push("/avatar-edit");
};

// 头像预览
const previewAvatar = () => {
  showImagePreview({
    images: [userStore.userInfo.avatar],
    showIndex: false,
  });
};

// 导航到其他页面
const navigateTo = (route) => {
  router.push(route);
};

// 处理退出登录
const handleLogout = () => {
  userStore.logout();
  router.push("/login");
  showLogoutPopup.value = false;
};

// 初始化
onMounted(async () => {
  // 获取衣物数量
  const { total: clothesTotal } = await clothesStore.fetchClothesList();
  clothesCount.value = clothesTotal;
  // 获取穿搭数量
  const { total: outfitTotal } = await outfitStore.fetchOutfitsList();
  outfitCount.value = outfitTotal;
});
</script>

<style scoped>
.user-center-container {
  height: 100vh;
  padding-bottom: 60px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
  margin: 0 0 20px 0;
}

.user-info-card {
  background: linear-gradient(135deg, #f9e0a9 0%, #cbc1f5 100%);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  border-radius: 0 0 12px 12px;
  padding: 100px 20px 30px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  position: relative;
  margin-right: 30px;
}

.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.user-email {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.user-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  text-align: center;
}
.stat-item div {
  display: flex;
  gap: 5px;
}
.stat-value {
  display: block;
  font-weight: bold;
  color: #000000;
}

.stat-label {
  display: block;
  color: #999;
}

.menu-section {
  background: white;
  margin: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.van-cell {
  padding-left: 0;
  padding-right: 0;
}
.popup-confirm-btn {
  display: block;
  width: 100%;
  padding: 20px 0;
  background-color: #000000;
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.menu-group {
  border-bottom: 1px solid #eee;
}

.menu-group:last-child {
  border-bottom: none;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #f9f9f9;
}

.menu-icon {
  color: #409eff;
  margin-right: 15px;
  font-size: 18px;
}

.menu-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.menu-arrow {
  color: #999;
  font-size: 14px;
}

.logout-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.logout-button {
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.version-info {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding-bottom: 20px;
}

.popup-content {
  text-align: center;
  padding: 20px;
}

.popup-content h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #000000;
}

.about-content,
.privacy-content,
.help-content {
  text-align: left;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}
.about-content-text {
  color: #666;
  margin-bottom: 20px;
  text-align: center;
}
.popup-content-container {
  padding: 20px;
  text-align: center;
}
.popup-content-container h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #000000;
}
.popup-buttons {
  background-color: #f0f0f0;
  display: flex;
  border-radius: 8px;
  height: 64px;
}
.cancel-btn {
  width: 50%;
  height: 100%;
  border: none;
  background: none;
  color: #000000;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-btn {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
</style>
